import React, { Component } from 'react'
import "./index.css"
import PubSub from 'pubsub-js'
export default class List extends Component {
    // 初始化状态，userData
    state = {
        userData: [], //初始化用户数据
        isFirst: true,//是否初次打开页面
        isLoding: false,//是否正在加载
        err: ''
    }

    // 
    // 组件挂载后，开始订阅消息
    componentDidMount(){
        // 订阅消息
        this.token=PubSub.subscribe("updateState",(msg,stateObj)=>{
            this.setState({...stateObj})
        })
    }
    // 组件卸载后，取消消息订阅
    componentWillUnmount(){
        PubSub.unsubscribe(this.token)
    }
    render() {
        const { userData, isFirst, isLoding, err } = this.state
        return (
            <div className="row">
                {
                    isFirst ? <h2>Welcome to search message</h2> :
                        isLoding ? <h2>Loding.......</h2> :
                            err ? <h3>{err}</h3> :
                                userData.map((DataObj) => {
                                    return (
                                        <div className="card" key={DataObj.id}>
                                            <a href={DataObj.html_url} target="_blank" rel="noreferrer">
                                                <img alt="header_img" src={DataObj.avatar_url} style={{ width: "100px" }} />
                                            </a>
                                            <p className="card-text">{DataObj.login}</p>
                                        </div>
                                    )
                                })
                }

            </div>
        )
    }
}
